<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <span id='spanDom'></span>
    <br />
    <input type='text' id='inputDom'></input>
</body>
<script type="text/javascript">
    //相比defineProperty 无需指定某个属性进行监听,也不需要拷贝 3.0使用
    let obj = {}
    obj = new Proxy(obj, {
        get(target, prop) { //target 对象  prop 属性
            console.log(target, prop, target[prop], 'get')
            return target[prop]
        },
        set(target, prop, value) { //target 对象  prop 属性 value 值
            console.log(target, prop, value, target[prop], 'set')
            target[prop] = value
            observer()
        }
    })
    function observer() {
        spanDom.innerHTML = obj.name || '';
        inputDom.value = spanDom.innerHTML
    }
    inputDom.oninput = function () {
        obj.name = this.value
    }
</script>

</html>